<template>
  <div style="margin-top: 10px">
    <n-pagination
        v-model:page="pageData.page"
        v-model:page-size="pageData.size"
        :item-count="total"
        show-size-picker
        @update:page="handleUpdatePage"
        @update:page-size="handleUpdatePageSize"
        :page-sizes="[10,20,30,50,100,150]"
    />
  </div>
</template>

<script setup lang="ts">
import { NPagination } from "naive-ui";
import { reactive, ref, Ref } from "vue";

let pageData = reactive({
  page: 1,
  size: 10
})


let props = defineProps({
  total:{
    type:Number,
    default:0
  },
  getList: Function
});

let emit = defineEmits(['update'])

async function handleUpdatePage(number: number) {
  pageData.page = number;
  emit('update', pageData)
  if (props.getList) {
    await props.getList(pageData);
  }
}

async function handleUpdatePageSize(number: number) {
  pageData.size = number;
  emit('update', pageData);
  if (props.getList) {
    await props.getList(pageData);
  }
}


</script>

<style scoped>

</style>
